<template>
	<div class="search-history" v-if="wordHistory.length>0">
		<div class="history-item" v-for="(h,index) in wordHistory" :key="index" @click="$emit('changekeyword',h)">
			<span class="history-icon"></span>
			<span class="word one-line">{{h}}</span>
			<div class="del-word" @click.stop="del(index)"></div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			wordHistory: Array
		},
		methods: {
			del(index) {
				this.wordHistory.splice(index, 1);
				this.$emit('delhot', this.wordHistory);
				console.log("mmmmm",this.$emit('delhot', this.wordHistory));
			}
		}
	}
</script>

<style scoped lang="less">
	.search-history {
		background-color: #fff;

		.history-item {
			margin-left: 15px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e5e5e5;
			line-height: 44px;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.history-icon {
				width: 15px;
				height: 15px;
				margin-right: 10px;
				background: url(../assets/img/recent-search.png) no-repeat;
				background-size: contain;
				display: inline-block;
				flex: 0 0 auto;
			}

			.word {
				color: #333;
				font-size: 15px;
				flex: 1 1 auto;
				display: inline-block;
			}

			.del-word {
				background-image: url(../assets/img/delete.png);
				background-repeat: no-repeat;
				background-position: 15px;
				background-size: 10px;
				align-self: center;
				padding: 17px 15px;
				width: 10px;
				height: 10px;
				flex: 0 0 auto;
			}
		}
	}

	.one-line {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
